<template>
  <div>
    <div>3d立体饼图</div>
    <div class="pie1" id="charts" ref="chart" style="background-color:#3d525d;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getPie3D, bindListen } from '@/utils/chart.js' //工具类js，页面路径自己修改
export default {
  components: {},
  data() {
    return {
      //饼图数据+颜色
      optionData: [
        {
          name: '休闲室',//名称
          value: 19,//值
          itemStyle: {//颜色 红色
            color: 'rgba(245,68,8,0.5)', //类型为type: 'surface',除了颜色字符串外，支持使用数组表示的 RGBA 值,不支持渐变
            // opacity:0.9,
            // color: new echarts.graphic.LinearGradient(
            //   1, 1, 1, 0,  //(上-下 渐变)
            //   [
            //     { offset: 0, color: 'rgba(118, 255, 255, 0.2)' },
            //     { offset: 1, color: 'rgba(118, 255, 255, 1)' },
            //   ]
            // )
            // color: {
            //   type: 'linear',
            //   x: 0,
            //   y: 0,
            //   x2: 1,
            //   y2: 0,
            //   colorStops: [{
            //     offset: 0, color: 'rgba(245,68,8,1)' // 0% 处的颜色
            //   }, {
            //     offset: 1, color: 'rgba(98, 195, 250,1)' // 100% 处的颜色
            //   }],
            //   global: false // 缺省为 false
            // }
          }
        }, {
          name: '羽毛球室',//蓝色
          value: 13,
          itemStyle: {
            color: 'rgba(98, 195, 250,0.8)',
          }
        }, {
          name: '瑜伽室',//绿色
          value: 15,
          itemStyle: {
            color: 'rgba(140, 189, 107,0.6)'
          }
        },
        {
          name: '动感单车室',//橙色
          value: 16,
          itemStyle: {
            color: 'rgba(245, 182, 94,0.8)'
          }
        },
        {
          name: '兵乓球室',//黄色
          value: 5,
          itemStyle: {
            color: 'rgba(237, 222, 111,0.9)'
          }
        }
      ],
      option:null,
    }
  },
  created(){
    // this.setLabel()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      //构建3d饼状图
      let myChart = echarts.init(document.getElementById('charts'));
      // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
      this.option = getPie3D(this.optionData, 0.85);
      //重新绘一个2D的饼图显示连接线及数据
      this.setLabel()
      //将配置项设置进去
      myChart.setOption(this.option);
      //鼠标移动上去特效效果
      bindListen(myChart, this.option);
    },
    // 初始化label样式
    setLabel() {
      //重新绘一个2D的饼图显示连接线及数据
      this.option.series.push({
        name: 'pie2d',
        type: 'pie',
        label: {
          opacity: 1,
          fontSize: 13,
          lineHeight: 20,
          formatter: [
            '{a}\n',
            '{b}:',
            '{c}台，',
            '{d}%'
          ].join(''), // 用来换行
        },
        labelLine: {
          smooth: false,
          length: 60,
          length2: 50
        },
        startAngle: -10, //起始角度，支持范围[0, 360]。
        clockwise: false,//饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ['10%', '40%'],
        data: this.optionData,
        itemStyle: {
          opacity: 0 //必须为0
        }
      });
    },
    
  }
}
</script>

<style lang="scss" scoped>
.pie1{
  width: 100%;
  height: 300px;
}
</style>